<template>
  <div style="width: 100%;overflow-y:scroll;height: calc(100vh - 72px)">
    <div class="modern-forms" style="margin-top: 120px">
      <div class="modern-container">
        <form style="text-align: left">
          <fieldset>
            <div class="mdn-group">
              <label class="field-group mdn-upload">
                <input v-model="imgpath" type="text" class="mdn-input" placeholder="no file selected" @click="selectImg" readonly>
                <label class="mdn-label">File Load</label>
                <span class="mdn-bar"></span>
                <span class="mdn-button btn-primary"> Choose Image </span>
              </label>
            </div>
            <template v-if="imgpath">
              <div class="form-row">
                <div class="col col-6">
                  <div class="mdn-group">
                    <label class="field-group mdn-upload">
                      <label class="mdn-label">Space Domain</label>
                      <img id="originImg" style="margin-top: 10px"/>
                    </label>
                  </div>
                </div><!-- end col-4 -->
                <div class="col col-6">
                  <div class="mdn-group">
                    <label class="field-group mdn-upload">
                      <label class="mdn-label">Frequency Domain</label>
                      <canvas id="frequencyImg" style="margin-top: 10px"/>
                    </label>
                  </div>
                </div><!-- end col-4 -->
              </div><!-- end form-row -->
            </template>
          </fieldset>
        </form>
      </div><!-- modern-container -->
    </div><!-- modern-forms -->
  </div>
</template>

<script>
import * as d3 from 'd3'
import { sliderBottom } from 'd3-simple-slider';
var mutex = true
function Fourier(imgdata, u, v, M, N) {
  let R,G,B,Gray, conv = 0, iconv = 0;
  for(let x = 0;x < M;x++){
    for(let y = 0;y < N;y++){
      let index = y*M+x, t = 2*Math.PI*(u*x/M + v*y/N);
      let cos = Math.cos(t), isin = -Math.sin(t);
      R = imgdata[index*4]
      G = imgdata[index*4+1]
      B = imgdata[index*4+2]
      Gray = parseInt(R*0.299 + G*0.587 + B*0.114)// 彩色图转到频率域效果不好
      if((x+y)%2===1) Gray = - Gray;// 移动到中间
      conv += Gray * cos
      iconv += Gray * isin
    }
  }
  return [conv,iconv];
  // [
  //   Math.sqrt(r*r+ri*ri),//取模
  //   Math.sqrt(g*g+gi*gi),
  //   Math.sqrt(b*b+bi*bi)
  // ];
}
export default {
  name: "c4q1",
  data(){
    return{
      imgpath:null,
      processing: false
    }
  },
  methods:{
    selectImg(){
      let input = document.createElement('input');
      input.type = 'file';
      return new Promise(function (resolve) {
        input.onchange = function(ev) {
          resolve(ev.target.files[0])
          return false;
        };
        input.click();
      }).then(file=>{
        this.imgpath = file.path
        const that = this
        return new Promise(function (resolve) {
          var reader = new FileReader();
          reader.onload = function(e){
            // target.result 该属性表示目标对象的DataURL
            let img = document.getElementById('originImg')
            img.src = e.target.result
            img.onload = ()=>resolve(img)
          }
          // 传入一个参数对象即可得到基于该参数对象的文本内容
          reader.readAsDataURL(file);
        }).then(img=>{
          let canvas = document.getElementById('frequencyImg')
          canvas.width = img.width;
          canvas.height = img.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
          let imgData = ctx.getImageData(0,0,img.width,img.height)
          let M = img.width, N = img.height, len = img.width * img.height, store = [];
          let maxV = -1,minV = Number.MAX_VALUE;
          for(let v = 0;v < N;v++){
            for(let u = 0;u < M;u++){
              let i = v * M + u;
              let [conv,iconv] = Fourier(imgData.data,u,v,M,N)
              // conv = Math.min(40000,conv);
              // this.percent = parseInt(i*100/len)
              if(u === 75) console.log(i,len,conv)
              store.push(conv,iconv);
            }
          }
          function nonlinearMaper(conv,iconv){
            return parseInt(Math.round(20 * Math.log(Math.sqrt(conv*conv+iconv*iconv))));
          }
          for(let i = 0;i < len;i++){
            imgData.data[i*4] = imgData.data[i*4+1] = imgData.data[i*4+2] = nonlinearMaper(store[i*2],store[i*2+1]);
            imgData.data[i*4+3] = 255
          }
          ctx.clearRect(0,0,img.width,img.height);
          ctx.putImageData(imgData, 0, 0);
        })
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.axis path,
.axis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.MyRect {
  fill: steelblue;
}

.MyText {
  fill: white;
  text-anchor: middle;
}

</style>